<template>
    <div class="the-header">
        <div class="header-logo" @click="goHome">
            <svg class="icon">
                <use xlink:href= "#icon-erji"></use>
            </svg>
            <span>视频网站</span>
        </div>
        <ul class="navbar">

            <li :class="{active: item.name==activeName}" v-for="item in navMsg" :key="item.path" @click="goPage(item.path,item.name)">{{item.name}}
            </li>
            <li>
                <div class="header-search">
                    <input type="text" placeholder="test" @keyup.enter="goSearch()" v-model="keywords">
                    <div class="search-btn" @click="goSearch()">
                        <span>  搜索</span>

                    </div>
                </div>
            </li>
            <li v-show="!loginIn" :class="{active: item.name === activeName}" v-for="item in loginMsg" :key="item.path" @click="goPage(item.path,item.name)">
                {{item.name}}
            </li>
        </ul>
        <div class="header-right" v-show="loginIn">
            <span>{{ username }}</span>

            <div id="user">

                <img :src='attachImageUrl(photo)' alt="">
            </div>
            <ul class="menu">
                <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)">
                    {{item.name}}
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    import {mapState} from "vuex"
    import {mapGetters} from 'vuex'

    import { navMsg,loginMsg,menuList } from "../assets/data/header";


    export default {
        name: "the-header",
        data(){
            return{
                navMsg:[], //导航栏
                keywords:'',  //搜索
                loginMsg:[],
                menuList:[],//下拉菜单
            }
        },
        computed:{
            ...mapState("user",{
                username: state=>state.username,

            }),
          ...mapGetters ([
              'activeName',
              'loginIn',
              'photo',
          ])

        },
        created() {
            this.navMsg=navMsg;
            this.loginMsg=loginMsg;
            this.menuList=menuList;
        },
        mounted() {
          document.querySelector('#user').addEventListener('click',function (e) {
              document.querySelector('.menu').classList.add('show');
              e.stopPropagation() //关键在于阻止冒泡

          },false)
            document.querySelector('.menu').addEventListener('click',function (e) {
                e.stopPropagation() //关键在于阻止事件冒泡
            },false);
          document.addEventListener('click',function () {
              document.querySelector('.menu').classList.remove('show');

          })
        },
        methods:{
            notify(title,type){
                this.$notify({
                    title:title,
                    type:type
                })
            },
            goHome(){
                this.$router.push({path:"/"});
            },
            goPage(path,name){
                if(!this.loginIn && path==='/my-video'){
                    this.notify('请先登录','warnning')
                }else {
                    this.$store.commit('setActiveName',name)
                    this.$router.push({path:path});
                }

            },
            goSearch(){
                this.$router.push({path:'/search',query:{keywords: this.keywords}
                })
            },
            //获取图片地址
            attachImageUrl(srcUrl){
                return srcUrl? this.$store.state.configure.HOST+srcUrl : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fblog%2F201306%2F25%2F20130625150506_fiJ2r.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628167463&t=0b704648fa2f20fe3dd1a227f68e6e01"
            },
            goMenuList(path){
                if (path==0){
                    this.$store.commit('setLoginIn',false);
                    this.$router.go(0);
                }else{
                    this.$router.push({path:path})
                }

            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../assets/css/the-header';
</style>